<template>
	<view>
		<!-- <view class="cu-bar bg-white">
			<view class="action">
				图片上传
			</view>
			<view class="action">
				{{imgList.length}}/1
			</view>
		</view> -->
		<!-- <view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view> -->
		<view class="cu-form-group">
			<view class="title">群名称</view>
			<input placeholder="输入群名称" name="input" v-model="senddata.groupname"></input>
		</view>
		<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
		<view class="cu-form-group ">
			<textarea v-model="senddata.sign" placeholder="群说明"></textarea>
		</view>
		<!-- 好友列表 -->
		<view class="user-box">
			<scroll-view class="list-box" scroll-y="true">
				<checkbox-group @change="checkboxChange">
					<label class="user-item-box" v-for="(item,index) in friendList" :key="index">
						<view>
							<checkbox :value="item.value" :checked="item.checked" />
						</view>
						<view class="user-img" v-if="item.img != 1">
							<image :src="item.img" alt=""></image>
						</view>
						<view class="user-img" v-else>
							<image src="https://jihe2.oss-cn-beijing.aliyuncs.com/xinli/login/logo.png" alt=""></image>
						</view>
						<view class="content" @click="checkUserToRoom(item)">
							{{item.user}}
						</view>
					</label>
				</checkbox-group>
			</scroll-view>
		</view>
		<view class="padding"><button class="tui-btn" @click="createGroup">创建群</button></view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		name: 'record',
		data() {
			return {
				conversationList: [],
				friendList: [],
				userAddConversationList: [],
				senddata: {
					groupname: '',
					sign: ''
				},
				userId: []
			}
		},
		computed: {
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady,
				// conversationList: state => state.conversationList,
			})
		},
		watch: {
			conversationList(val) {
				console.log('conversationList', val);
				this.getUserInfo(val); 
			}

		},
		methods: {
			//根据消息列表请求聊天对象的用户信息 并完成数据拼接
			getUserInfo(conversationList) {
				let that = this;
				this.userAddConversationList = []
				conversationList.forEach(async item => {
					let obj = {}
					obj.conversation = item
					// 走后端,获取聊天对象的用户信息
					obj.user = await that.$api.userMessage({
						userId: item.toAccount
					});
					if (obj.user.userid) {
						that.userAddConversationList.push(obj);
					}
					console.log(that.userAddConversationList, 'item  ', item, obj.user);
				})
				
				// 按最后时间排序     
				console.log( this.userAddConversationList[0]    ); 
				this.userAddConversationList.sort((a, b)=> b.conversation.lastMessage.lastTime - a.conversation.lastMessage.lastTime);
				console.log('sort-conversationList', this.userAddConversationList );
			},
			checkboxChange: function (e) {
				var items = this.friendList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				console.log(values);
				this.userId = values.map(item => {
					let json = {};
					json.userID = item;
					return json;
				})
				console.log(this.userId)
			},
			createGroup(){
				console.log('onLoad',this.tim);
				// 创建聊天室
				let promise = this.tim.createGroup({
				  type: this.$TIM.TYPES.GRP_CHATROOM,
				  name: this.senddata.groupname,
				  introduction: this.senddata.sign,
				  avatar: uni.getStorage('userInfo').userId,
				  memberList: this.userId // 如果填写了 memberList，则必须填写 userID
				});
				promise.then(function(imResponse) { // 创建成功
				  console.log('createGroup ok:',imResponse.data.group); // 创建的群的资料
				  uni.navigateTo({
				  	url: 'groups'
				  })
				}).catch(function(imError) {
				  console.warn('createGroup error:', imError); // 创建群组失败的相关信息
				});
			},
		},
		onShow() {
			let userInfo = uni.getStorageSync('userInfo');
			this.type = userInfo.type;
			if( !userInfo || '' == JSON.stringify(userInfo) || '{}' == JSON.stringify(userInfo)){
				uni.reLaunch({
					url: '/pages/login/login'
				}) 
			}else{
				let promise = this.tim.login({
					userID: userInfo.userId,
					userSig: userInfo.userSig
				});
				promise.then((res) => {
					//登录成功后 更新登录状态
					this.$store.commit("toggleIsLogin", true);
					//自己平台的用户基础信息
					//tim 返回的用户信息
					uni.setStorageSync('userTIMInfo', res.data)
				}).catch((err) => {
					console.warn('login error:', err); // 登录失败的相关信息
				});
			}
		},
		onLoad() {
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
			
			let userInfo = uni.getStorageSync('userInfo');
			this.friendList = userInfo.friendList;
			this.friendList.forEach(item => {
				item.name = item.user;
				item.value = item.userId;
			})
			let page = this.$tools.commons.getPage();
			if( page ){
				this.isActive = page.isActive;
			}
			console.log('dsda', userInfo.friendList, this.friendList);
		}
	}
</script>

<style scoped lange="scss">
	@import url("css/main.css");
	@import url("css/icon.css");
	.tui-btn {
		background-color: #df5451;
		color: #fff;
	}
	.padding{
		padding: 40upx;
	}
	.nav-tab{
		background: none !important;
	}
	.list-box {
		width: 94%;
		margin: 40rpx auto;
		height: 600upx;
	}

	.item-box {
		width: auto;
		height: 130rpx;
		padding: 20rpx;
		overflow: hidden;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
	}

	.item-img {
		width: 80rpx;
		height: 80rpx;
	}

	.item-img img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.item-text {
		flex: 1;
		padding-left: 30rpx;
		height: 100rpx;
		color: #666;
		font-size: 28rpx;
	}

	.item-user {
		width: auto;
		line-height: 60rpx;
		color: 333;
		font-size: 32rpx;
	}

	.item-text-info {
		width: auto;
		height: 60rpx;
		line-height: 60rpx;
		color: #666;
		font-szie: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.user-box {
		width: auto;
		padding: 0 20rpx;
	}

	.nav-tab {
		padding-top: 20rpx;
		background: #fff;
		height: 80rpx;

	}

	.tab-item {
		float: left;
		height: 70rpx;
		padding: 0 20rpx;
		line-height: 70rpx;
		color: #df5451;
		font-size: 28rpx;
		border: 1px solid #df5451;
		border-top-left-radius: 25rpx;
		border-bottom-left-radius: 25rpx;
	}

	.tab-item1 {
		float: left;
		height: 70rpx;
		padding: 0 20rpx;
		line-height: 70rpx;
		color: #df5451;
		font-size: 28rpx;
		border: 1px solid #df5451;
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
	}

	.tab-item-active {
		color: #ffff01;
		background: #df5451;
	}

	.msg-box {
		line-height: 30rpx;
		font-size: 28rpx;
		color: #666;
	}

	.user-item-box {
		padding: 20rpx 0;
		width: auto;
		height: 80rpx;
		line-height: 80rpx;
		cursor: pointer;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
	}

	.user-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.content{
		padding: 0 20upx;
		flex: 1;
	}
	.user-img image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.user-name {
		padding-left: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #666;
		font-weight: 500;
	}

	.item-msg {
		float: left;
		width: 40rpx;
		height: 100rpx;
	}

	.item-msg-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #f06c7a;
		color: #fff;
		line-height: 40rpx;
		margin-top: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.clear-box {
		clear: both;
	}

	.out-login {
		float: right;
		margin-right: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 40rpx;
		border-radius: 25rpx;
		color: #ffff01;
		background: #df5451;
		font-size: 26rpx;
	}
</style>
